<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    body{
      background: #000;
    }
    .loader{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 305px;
      height: 305px;
      /*border:.2px solid red;*/
    }

    .loader > span{
      position: absolute;
      background: rgba(255,255,255,.1);
      border: 10px solid rgba(255,255,255,.2);
      border-top: 10px solid rgba(255,255,255,1);
      border-bottom: 10px solid rgba(255,255,255,1);
      box-shadow: 0 0 25px rgba(0,0,0,.5);
      animation-name: animate;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
    .s1{ left: 20px; right: 20px; top: 20px; bottom: 20px; animation-delay: -0.1s;}
    .s2{ left: 40px; right: 40px; top: 40px; bottom: 40px; animation-delay: -0.2s;}
    .s3{ left: 60px; right: 60px; top: 60px; bottom: 60px; animation-delay: -0.3s; }
    .s4{ left: 80px; right: 80px; top: 80px; bottom: 80px; animation-delay: -0.4s; }
    .s5{ left: 100px; right: 100px; top: 100px; bottom: 100px; animation-delay: -0.5s; }
    .s6{ left: 120px; right: 120px; top: 120px; bottom: 120px; animation-delay: -0.6s; }
    .s7{ left: 140px; right: 140px; top: 140px; bottom: 140px; animation-delay: -0.7s; }
    @keyframes animate {
      0%{
        transform: rotate(0deg);
        background-color: rgba(255,0,0,.2);
      }
      20%{
        background-color: rgba(0,255,0,.2);
      }
      40%{
        background-color: rgba(0,0,255,.2);
      }
      60%{
        background-color: rgba(255,255,0,.2);
      }
      80%{
        background-color: rgba(255,0,255,.2);
      }
      100%{
        background-color: rgba(0,255,255,.2);
        transform: rotate(720deg);
      }
    }
  </style>
</head>
<body>
<div class="loader">
  <span class="s1"></span>
  <span class="s2"></span>
  <span class="s3"></span>
  <span class="s4"></span>
  <span class="s5"></span>
  <span class="s6"></span>
  <span class="s7"></span>
</div>
</body>
</html>